<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教学管理系统-班级管理</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    colors: {
                        primary: "#165DFF",
                        secondary: "#36CFC9",
                        success: "#52C41A",
                        warning: "#FAAD14",
                        danger: "#FF4D4F",
                        info: "#8C8C8C",
                        "bg-light": "#F5F7FA",
                        "bg-dark": "#1D2129",
                    },
                    fontFamily: {
                        inter: ["Inter", "system-ui", "sans-serif"],
                    },
                    boxShadow: {
                        card: "0 4px 20px rgba(0, 0, 0, 0.08)",
                        "card-hover": "0 8px 30px rgba(0, 0, 0, 0.12)",
                        nav: "0 4px 20px rgba(0, 0, 0, 0.05)",
                    },
                    animation: {
                        "fade-in": "fadeIn 0.3s ease-in-out",
                        "slide-up": "slideUp 0.3s ease-out",
                        "slide-down": "slideDown 0.3s ease-out",
                    },
                },
            },
        };
    </script>

    <style type="text/tailwindcss">
        @layer utilities {

            .animate-fade-in {
                animation: fadeIn 0.3s ease-in-out;
            }

            .animate-slide-up {
                animation: slideUp 0.3s ease-out;
            }

            @keyframes fadeIn {
                from {
                    opacity: 0;
                }
                to {
                    opacity: 1;
                }
            }
            @keyframes slideUp {
                from {
                    transform: translateY(20px);
                    opacity: 0;
                }
                to {
                    transform: translateY(0);
                    opacity: 1;
                }
            }
            @keyframes slideDown {
                from {
                    transform: translateY(-20px);
                    opacity: 0;
                }
                to {
                    transform: translateY(0);
                    opacity: 1;
                }
            }
        }
    </style>
</head>
<body class="font-inter bg-bg-light dark:bg-bg-dark transition-colors duration-300">
<div id="app">
    <!-- 导航栏 -->
    <navigation></navigation>
    <!-- 侧边栏 -->
    <sidebar></sidebar>
    <!-- 遮罩层 -->
    <div
            id="overlay"
            class="fixed inset-0 bg-black bg-opacity-50 z-30 hidden lg:hidden"
    ></div>
    <!-- 主内容区 -->
    <main class="pt-16 lg:pl-64 min-h-screen">
        <div class="container mx-auto px-6 py-8">
            <div class="animate-fade-in">
                <!-- 页面标题和添加按钮 -->
                <div class="bg-white dark:bg-gray-800 rounded-2xl p-6 mb-6 shadow-card">
                    <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                        <div>
                            <h2 class="text-2xl font-bold text-gray-800 dark:text-white">信息学院班级管理</h2>
                            <p class="text-gray-600 dark:text-gray-400 mt-1">管理信息学院所有班级信息</p>
                        </div>
                        <button
                                @click="openAddClassModal"
                                class="mt-4 md:mt-0 bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-colors flex items-center"
                        >
                            <i class="fa fa-plus mr-2"></i>添加班级
                        </button>
                    </div>
                </div>
                <!-- 搜索框 -->
                <div class="bg-white dark:bg-gray-800 rounded-2xl p-6 mb-6 shadow-card">
                    <div class="flex">
                        <input type="text" v-model="kw" placeholder="搜索班级名称、年级..."
                               class="flex-1 px-4 py-2 rounded-l-lg border border-gray-300 focus:outline-none ">
                        <button @click="search"
                                class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-r-lg transition-colors">
                            <i class="fa fa-search mr-2"></i>搜索
                        </button>
                    </div>
                </div>
                <!-- 班级列表 -->
                <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6">
                    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                        <thead>
                        <tr>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                班级编号
                            </th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                班级名称
                            </th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                年级
                            </th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                专业
                            </th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                班主任
                            </th>
                            <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                操作
                            </th>
                        </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                        <!-- 添加条件判断 -->
                        <tr v-if="classes.length === 0">
                            <td colspan="6" class="px-4 py-4 text-center text-gray-500 dark:text-gray-400">
                                未找到数据
                            </td>
                        </tr>
                        <tr
                                v-for="cls in classes"
                                :key="cls.id"
                                class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors cursor-pointer"
                                @click="viewClass(cls)"
                        >
                            <td class="px-4 py-4 whitespace-nowrap">{{ cls.class_id }}</td>
                            <td class="px-4 py-4 whitespace-nowrap">{{ cls.name }}</td>
                            <td class="px-4 py-4 whitespace-nowrap">{{ cls.grade }}</td>
                            <td class="px-4 py-4 whitespace-nowrap">{{ cls.major }}</td>
                            <td class="px-4 py-4 whitespace-nowrap">{{ cls.head_teacher_name }}</td>
                            <td class="px-4 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <div class="flex justify-end space-x-2">
                                    <button
                                            @click.stop="editClass(cls.id)"
                                            class="p-1 rounded text-primary hover:bg-primary/10"
                                            title="编辑"
                                    >
                                        <i class="fa fa-edit"></i>
                                    </button>
                                    <button
                                            @click.stop="deleteClass(cls.id)"
                                            class="p-1 rounded text-danger hover:bg-danger/10"
                                            title="删除"
                                    >
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <!-- 分页 -->
                    <div class="px-4 py-3 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between">
                        <!-- 仅在有数据时显示分页 -->
                        <div v-if="classes.length > 0"
                             class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                            <div>
                                <p class="text-sm text-gray-700 dark:text-gray-300">
                                    显示第 <span class="font-medium">{{ (currentPage - 1) * pageSize + 1 }}</span> 到
                                    <span class="font-medium">{{
                                            Math.min(currentPage * pageSize, totalItems)
                                        }}</span>
                                    条，共 <span class="font-medium">{{ totalItems }}</span> 条记录
                                </p>
                            </div>
                            <div>
                                <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
                                     aria-label="Pagination">
                                    <button
                                            @click="prevPage"
                                            :disabled="currentPage === 1"
                                            class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white dark:bg-gray-700 dark:border-gray-600 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600"
                                    >
                                        <span class="sr-only">上一页</span>
                                        <i class="fa fa-chevron-left text-xs"></i>
                                    </button>

                                    <button
                                            v-for="page in totalPages"
                                            :key="page"
                                            @click="currentPage = page; fetchTeachers()"
                                            :class="{
                            'z-10 bg-primary text-white border-primary': currentPage === page,
                            'bg-white border-gray-300 text-gray-500 hover:bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-600': page !== currentPage
                        }"
                                            class="relative inline-flex items-center px-4 py-2 border text-sm font-medium"
                                    >
                                        {{ page }}
                                    </button>

                                    <button
                                            @click="nextPage"
                                            :disabled="currentPage === totalPages"
                                            class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white dark:bg-gray-700 dark:border-gray-600 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600"
                                    >
                                        <span class="sr-only">下一页</span>
                                        <i class="fa fa-chevron-right text-xs"></i>
                                    </button>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 添加/编辑班级模态框 -->
    <transition name="fade">
        <div
                class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
                v-if="isModalOpen"
                @click.self="closeModal"
        >
            <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl w-full max-w-md animate-slide-up">
                <div class="flex justify-between items-center border-b border-gray-200 dark:border-gray-700 p-6">
                    <h3 class="text-xl font-bold text-gray-800 dark:text-white">{{
                            isEditMode ? '编辑班级信息' : '添加新班级'
                        }}</h3>
                    <button @click="closeModal"
                            class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
                <form @submit.prevent="saveClass">
                    <div class="p-6 space-y-4 max-h-[70vh] overflow-y-auto">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">班级编号<span
                                        class="text-danger">*</span></label>
                                <input
                                        type="text"
                                        v-model="formData.class_id"
                                        class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-primary/50 dark:bg-gray-700 dark:text-white"
                                        required
                                >
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">班级名称<span
                                        class="text-danger">*</span></label>
                                <input
                                        type="text"
                                        v-model="formData.name"
                                        class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-primary/50 dark:bg-gray-700 dark:text-white"
                                        required
                                >
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">年级<span
                                        class="text-danger">*</span></label>
                                <select
                                        v-model="formData.grade"
                                        class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-primary/50 dark:bg-gray-700 dark:text-white"
                                        required
                                >
                                    <option value="">请选择</option>
                                    <option v-for="year in 4" :value="2020 + year+'级'">{{
                                            2020 + year + '级'
                                        }}
                                    </option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">专业<span
                                        class="text-danger">*</span></label>
                                <select
                                        v-model="formData.major"
                                        class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-primary/50 dark:bg-gray-700 dark:text-white"
                                        required
                                >
                                    <option value="">请选择</option>
                                    <option v-for="item in majors" :value="item.name">{{ item.name }}</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">班主任<span
                                        class="text-danger">*</span></label>
                                <select
                                        v-model="formData.head_teacher_id"
                                        class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-primary/50 dark:bg-gray-700 dark:text-white"
                                        required
                                >
                                    <option value="">请选择</option>
                                    <option v-for="item in teachers" :value="item.id">{{ item.name }}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="p-6 border-t border-gray-200 dark:border-gray-700 flex justify-end space-x-3">
                        <button
                                type="button"
                                @click="closeModal"
                                class="px-4 py-2 rounded-lg bg-gray-200 text-gray-700 hover:bg-gray-300 transition-colors dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
                        >
                            取消
                        </button>
                        <button
                                type="submit"
                                class="px-4 py-2 rounded-lg bg-primary text-white hover:bg-primary/90 transition-colors flex items-center justify-center"
                                :disabled="isSaving"
                        >
                            <span v-if="isSaving">
                                <i class="fa fa-spinner fa-spin mr-2"></i>保存中...
                            </span>
                            <span v-else>
                                {{ isEditMode ? '保存' : '添加' }}
                            </span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </transition>

    <!-- 确认删除模态框 -->
    <transition name="fade">
        <div
                class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
                v-if="isDeleteModalOpen"
                @click.self="closeDeleteModal"
        >
            <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl w-full max-w-md animate-slide-up">
                <div class="flex justify-between items-center border-b border-gray-200 dark:border-gray-700 p-6">
                    <h3 class="text-xl font-bold text-gray-800 dark:text-white">确认删除</h3>
                    <button @click="closeDeleteModal"
                            class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
                <div class="p-6">
                    <p class="text-gray-600 dark:text-gray-400">确定要删除班级 {{ deleteClassName }} 吗？</p>
                </div>
                <div class="p-6 border-t border-gray-200 dark:border-gray-700 flex justify-end">
                    <button
                            @click="closeDeleteModal"
                            class="px-4 py-2 rounded-lg bg-gray-200 text-gray-700 hover:bg-gray-300 transition-colors dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
                    >
                        取消
                    </button>
                    <button
                            @click="confirmDelete"
                            class="px-4 py-2 rounded-lg bg-danger text-white hover:bg-danger/90 transition-colors flex items-center justify-center"
                            :disabled="isDeleting"
                    >
                        <span v-if="isDeleting">
                            <i class="fa fa-spinner fa-spin mr-2"></i>删除中...
                        </span>
                        <span v-else>
                            确认删除
                        </span>
                    </button>
                </div>
            </div>
        </div>
    </transition>

    <!-- 班级详情模态框 -->
    <transition name="fade">
        <div
                class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
                v-if="isViewModalOpen"
                @click.self="closeViewModal"
        >
            <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl w-full max-w-4xl animate-slide-up max-h-[90vh] overflow-hidden flex flex-col">
                <div class="flex justify-between items-center border-b border-gray-200 dark:border-gray-700 p-6">
                    <h3 class="text-xl font-bold text-gray-800 dark:text-white">班级详情：{{
                            viewClassData.name
                        }}</h3>
                    <button @click="closeViewModal"
                            class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
                <div class="p-6 overflow-y-auto flex-1">
                    <!-- 班级基本信息 -->
                    <div class="bg-gray-50 dark:bg-gray-700/50 p-6 rounded-xl mb-6">
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                            <div>
                                <h4 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">班级编号</h4>
                                <p class="text-gray-800 dark:text-gray-200 font-medium">{{ viewClassData.class_id }}</p>
                            </div>
                            <div>
                                <h4 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">年级</h4>
                                <p class="text-gray-800 dark:text-gray-200 font-medium">{{ viewClassData.grade }}</p>
                            </div>
                            <div>
                                <h4 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">专业</h4>
                                <p class="text-gray-800 dark:text-gray-200 font-medium">{{ viewClassData.major }}</p>
                            </div>
                            <div>
                                <h4 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">班主任</h4>
                                <p class="text-gray-800 dark:text-gray-200 font-medium">{{
                                        viewClassData.head_teacher_name
                                    }}</p>
                            </div>
                            <div>
                                <h4 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">学生人数</h4>
                                <p class="text-gray-800 dark:text-gray-200 font-medium">{{
                                        viewClassData.students.length
                                    }}</p>
                            </div>
                        </div>
                    </div>

                    <!-- 学生列表 -->
                    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm">
                        <div class="p-4 border-b border-gray-200 dark:border-gray-700">
                            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">班级学生列表</h3>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                                <thead>
                                <tr>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                        学号
                                    </th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                        姓名
                                    </th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                        性别
                                    </th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                        联系方式
                                    </th>
                                </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                                <tr
                                        v-for="student in viewClassData.students"
                                        :key="student.id"
                                        class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
                                >
                                    <td class="px-4 py-4 whitespace-nowrap">{{ student.student_id }}</td>
                                    <td class="px-4 py-4 whitespace-nowrap">{{ student.name }}</td>
                                    <td class="px-4 py-4 whitespace-nowrap">
                                        <span class="student-badge"
                                              :class="student.gender === '男' ? 'student-male' : 'student-female'">
                                            {{ student.gender }}
                                        </span>
                                    </td>
                                    <td class="px-4 py-4 whitespace-nowrap">{{ student.phone }}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="p-6 border-t border-gray-200 dark:border-gray-700 flex justify-end">
                    <button
                            @click="closeViewModal"
                            class="px-4 py-2 rounded-lg bg-gray-200 text-gray-700 hover:bg-gray-300 transition-colors dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
                    >
                        关闭
                    </button>
                </div>
            </div>
        </div>
    </transition>
</div>
</body>
<script src="/static/js/top.js"></script>
<script src="/static/js/aside.js"></script>
<script src="/static/js/message.js"></script>
<script src="/static/js/axios.min.js"></script>
<script src="/static/js/common.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            // 搜索和筛选
            kw: '',

            // 分页
            currentPage: 1,
            pageSize: 10,
            totalPages: 0,
            totalItems: 0,

            // 模态框状态
            isModalOpen: false,
            isEditMode: false,
            isViewModalOpen: false,
            isDeleteModalOpen: false,
            isSaving: false,
            isDeleting: false,
            deleteClassId: null,
            deleteClassName: '',

            // 班级数据
            classes: [],
            // 专业数据
            majors: [
                {"id": 1, "name": '计算机科学与技术'},
                {"id": 2, "name": '软件工程'},
                {"id": 3, "name": '物联网工程'},
                {"id": 4, "name": '数据科学'},
            ],
            teachers: [
                {
                    id: 1,
                    name: '张明'
                },
                {
                    id: 2,
                    name: '李华'
                },
                {
                    id: 3,
                    name: '王强',
                },
                {
                    id: 4,
                    name: '赵琳',
                },
                {
                    id: 5,
                    name: '陈刚',

                }
            ],


            // 表单数据
            formData: {
                id: null,
                class_id: '',
                name: '',
                grade: '',
                major: '',
                head_teacher_id: ''
            },

            // 查看班级数据
            viewClassData: {}
        },
        mounted() {
            this.fetchClasses();
        },
        methods: {
            // 获取班级列表
            fetchClasses() {
                axios.get('/classes', {
                    params: {
                        page: this.currentPage,
                        page_size: this.pageSize,
                        kw: this.kw
                    }
                })
                    .then(response => {
                        this.classes = response.data;
                        this.currentPage = response.pagination.current_page;
                        this.pageSize = response.pagination.page_size;
                        this.totalPages = response.pagination.total_pages;
                        this.totalItems = response.pagination.total_items;
                    })
                    .catch(error => {
                        console.error('获取班级列表失败:', error);
                    });
            },

            // 搜索班级
            search() {
                this.currentPage = 1;
                this.fetchClasses();
            },

            // 查看班级详情
            viewClass(cls) {
                this.viewClassData = {...cls};
                this.isViewModalOpen = true;
            },

            // 关闭查看模态框
            closeViewModal() {
                this.isViewModalOpen = false;
            },

            // 打开添加班级模态框
            openAddClassModal() {
                this.isEditMode = false;
                this.formData = {
                    id: null,
                    class_id: '',
                    name: '',
                    grade: '',
                    major: '',
                    head_teacher_id: ''
                };
                this.isModalOpen = true;
            },

            // 打开编辑班级模态框
            editClass(classId) {
                const cls = this.classes.find(cls => cls.id === classId);
                if (cls) {
                    this.isEditMode = true;
                    this.formData = {...cls};
                    this.isModalOpen = true;
                }
            },

            // 保存班级信息
            saveClass() {
                this.isSaving = true;
                if (this.isEditMode) {
                    // 更新现有班级
                    axios.put(`/classes/${this.formData.id}`, this.formData)
                        .then(response => {
                            message.success(response.message)
                            this.isSaving = false;
                            this.closeModal();
                            this.fetchClasses();
                        })
                        .catch(error => {
                            console.error('更新班级信息失败:', error);
                            this.isSaving = false;
                        });
                } else {
                    // 添加新班级
                    axios.post('/classes', this.formData)
                        .then(response => {
                            message.success(response.message)
                            this.isSaving = false;
                            this.closeModal();
                            this.fetchClasses();
                        })
                        .catch(error => {
                            console.error('添加班级失败:', error);
                            this.isSaving = false;
                        });
                }
            },

            // 关闭模态框
            closeModal() {
                this.isModalOpen = false;
            },

            // 打开确认删除模态框
            deleteClass(id) {
                const cls = this.classes.find(cls => cls.id === id);
                if (cls) {
                    this.deleteClassId = id;
                    this.deleteClassName = cls.className;
                    this.isDeleteModalOpen = true;
                }
            },

            // 确认删除
            confirmDelete() {
                this.isDeleting = true;
                axios.delete(`/classes/${this.deleteClassId}`)
                    .then(response => {
                        message.success(response.message)
                        this.isDeleting = false;
                        this.isDeleteModalOpen = false;
                        this.fetchClasses();
                    })
                    .catch(error => {
                        console.error('删除班级失败:', error);
                        this.isDeleting = false;
                    });
            },

            // 关闭确认删除模态框
            closeDeleteModal() {
                this.isDeleteModalOpen = false;
            },

            // 上一页
            prevPage() {
                if (this.currentPage > 1) {
                    this.currentPage--;
                    this.fetchClasses();
                }
            },

            // 下一页
            nextPage() {
                if (this.currentPage < this.totalPages) {
                    this.currentPage++;
                    this.fetchClasses();
                }
            }
        }
    });
</script>
</html>